<template>
  <div class="register-container">
    <div class="register-form-wrapper">
      <h2 class="register-title">用户注册</h2>
      <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="100px">
        
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名（学号）" />
        </el-form-item>
        
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="registerForm.pwd" type="password" placeholder="请输入密码" />
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="registerForm.confirmPwd" type="password" placeholder="请再次输入密码" />
        </el-form-item>
        
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="registerForm.age" placeholder="请输入年龄" />
        </el-form-item>
        
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="registerForm.realName" placeholder="请输入真实姓名" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <el-form-item label="学号" prop="stuNum">
          <el-input v-model="registerForm.stuNum" placeholder="请输入8位数字学号" />
        </el-form-item>
        
        <el-form-item label="班级" prop="className">
          <el-select v-model="registerForm.className" placeholder="请选择班级">
            <el-option label="23软件1班" value="23软件1班" />
            <el-option label="23软件2班" value="23软件2班" />
          </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleRegister" :loading="loading">注册</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useUserStore } from '../stores'
import { ElMessage } from 'element-plus'

export default {
  name: 'RegisterView',
  setup() {
    const registerFormRef = ref(null)
    const loading = ref(false)
    const userStore = useUserStore()
    
    const registerForm = reactive({
      username: '',
      pwd: '',
      confirmPwd: '',
      age: '',
      realName: '',
      email: '',
      stuNum: '',
      className: ''
    })
    
    // 表单验证规则
    const registerRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      confirmPwd: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.pwd) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', min: 16, max: 50, message: '年龄应在16-50之间', trigger: 'blur' }
      ],
      realName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
          type: 'email',
          message: '请输入正确的邮箱格式',
          trigger: ['blur', 'change']
        }
      ],
      stuNum: [
        { required: true, message: '请输入学号', trigger: 'blur' },
        {
          pattern: /^\d{8}$/,
          message: '学号必须是8位数字',
          trigger: 'blur'
        }
      ],
      className: [
        { required: true, message: '请选择班级', trigger: 'change' }
      ]
    }
    
    // 重置表单
    const resetForm = () => {
      registerFormRef.value.resetFields()
    }
    
    // 处理注册
    const handleRegister = async () => {
      try {
        await registerFormRef.value.validate()
        
        loading.value = true
        
        // 准备注册数据
        const registerData = {
          username: registerForm.username,
          pwd: registerForm.pwd,
          age: registerForm.age,
          realName: registerForm.realName,
          email: registerForm.email,
          stuNum: registerForm.stuNum,
          className: registerForm.className
        }
        
        // 调用注册接口
        const result = await userStore.register(registerData)
        
        if (result.success) {
          ElMessage.success('注册成功！')
          // 注册成功后跳转到登录页面
          setTimeout(() => {
            window.location.href = '/#/login'
          }, 1500)
        } else {
          ElMessage.error(result.message || '注册失败')
        }
      } catch (error) {
        console.error('注册失败:', error)
        if (error.message !== 'cancel') {
          ElMessage.error('注册失败，请检查输入信息')
        }
      } finally {
        loading.value = false
      }
    }
    
    return {
      registerFormRef,
      registerForm,
      registerRules,
      loading,
      resetForm,
      handleRegister
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.register-form-wrapper {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

.register-title {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #303133;
}

.el-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 1rem;
}

.el-button--primary {
  width: 100%;
}
</style>